<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>限定输入内容</title>
	</head>
	<body>
		<form>
			<p>年度：<input type="text"><span id="yearError"></span></p>
		    <p>月份：<input type="text"><span id="monthError"></span></p>
		   <button>查询</button>
		</form>
		<script>
			/* 1、获取元素对象
			   2、验证年份的函数
			   3、验证月份的函数
			   4、年份和月份添加失去焦点事件
			   */
			 
			// 1、获取元素对象
			var inputs=document.getElementsByTagName('input');
			var yearError=document.getElementById('yearError');
			var monthError=document.getElementById('monthError');
			
			//验证年份的函数:4位数
			function checkYear(obj){
				//验证obj内的值是否是四位数
				var str=obj.value;
				//4位数字的正则表达式：\d表示0-9的数字，{n}表示前面的字符出现n次
				var reg=/^\d{4}$/;
				if(!str.match(reg)){ //不匹配
					yearError.innerHTML="输入错误，年份为4位数字";
				}else{
					yearError.innerHTML='';
				}
			}
			//验证月份的函数:01-09或1-9 10-12
			function checkMonth(obj){
				//验证obj内的值是否是四位数
				var str=obj.value;
				//4位数字的正则表达式：\d表示0-9的数字，{n}表示前面的字符出现n次
				var reg=/^(0?[1-9]|1[0-2])$/;
				if(!str.match(reg)){ //不匹配
					monthError.innerHTML="输入错误";
				}else{
					monthError.innerHTML='';
				}
			}
			//年份输入框添加失去焦点事件
			inputs[0].onblur=function(){
				checkYear(this);
			}
			
			//月份输入框添加失去焦点事件
			inputs[1].onblur=function(){
				checkMonth(this);
			}
			
		</script>
	</body>
</html>
